<template>
  <a-layout id="qc-layout">
    <a-drawer
      class="mobileDrawer"
      v-if="isMobile()"
      placement="left"
      :closable="false"
      :visible="collapsed"
      @close="drawerClose"
    >
      <side-menu
        mode="inline"
        :menus="menus"
        :theme="menuTheme"
        :collapsed="false"
        :collapsible="true"
      ></side-menu>
    </a-drawer>
    <side-menu
      v-show="!isMobile() && menuType=='sideMenu'"
      :menus="menus"
      :theme="menuTheme"
      :collapsed="collapsed"
    />
    <a-layout :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
      <!-- 头部 -->

      <global-header
        @toggle="toggle"
        :collapsed="collapsed"
        :mode="menuType"
        :menus="menus"
        :theme="menuTheme"
      />

      <!-- 内容界面 -->
      <a-layout-content
        :style="{ height: '100%', margin: '24px 24px 0 ', paddingTop: fixHeader ? '64px' : '0'}"
      >
        <route-view />
      </a-layout-content>
      <!-- 底部 -->
      <a-layout-footer :style="{ textAlign: 'center' }">
        <global-footer />
      </a-layout-footer>
      <setting-drawer />
    </a-layout>
  </a-layout>
</template>
<script>
import GlobalHeader from "@/components/GlobalHeader";
import SideMenu from "@/layouts/component/SideMenu";
import PageView from "@/layouts/PageView";
import GlobalFooter from "@/components/GlobalFooter";
import SettingDrawer from "@/components/tools/SettingDrawer";
import RouteView from "./RouteView";
import { filterAsyncRouter } from "@/utils/routetool";
import { triggerWindowResizeEvent } from "@/utils/util";
import { mixin, mixinDevice } from "@/utils/mixin";

export default {
  mixins: [mixin, mixinDevice],
  components: {
    RouteView,
    GlobalHeader,
    SideMenu,
    PageView,
    GlobalFooter,
    SettingDrawer
  },
  data() {
    return {
      collapsed: this.$store.getters.collapsed,
      menus: []
    };
  },
  methods: {
    toggle() {
      this.collapsed = !this.collapsed;
      this.$store.dispatch("setting/toggleCollapsed", this.collapsed);
      triggerWindowResizeEvent();
    },
    drawerClose() {
      this.collapsed = false;
    }
  },
  created() {
    this.menus = global.asyncRoutes;
  },
  computed: {
    //计算主体页面距离左边的边距
    contentPaddingLeft() {
      if (
        !this.fixSidebar ||
        this.menuType === "topMenu" ||
        this.device == "mobile"
      ) {
        return "0";
      }
      if (this.collapsed) {
        return "80px";
      }
      return "256px";
    }
  }
};
</script>

<style >
.mobileDrawer .ant-drawer-body {
  padding: unset;
}
</style>



